<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Translation component example</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <h1>Translation component example</h1>

    <div id="app">
      <h2>localize with slot contents:</h2>
      <i18n-t tag="p" class="name" keypath="message.named">
        <template #name>
          <span>kazupon</span>
        </template>
      </i18n-t>

      <h2>localize with DOM contents:</h2>
      <i18n-t tag="p" class="list" keypath="message.list" locale="en">
        <span class="lang"
          >{{ t('message.language', {}, { locale: 'en' }) }}</span
        >
      </i18n-t>

      <h2>localize with using linked:</h2>
      <i18n-t tag="p" class="linked" keypath="message.linked">
        <template #name>
          <span>かずぽん</span>
        </template>
      </i18n-t>

      <h2>localize with using plural:</h2>
      <form>
        <label for="locale-select"
          >{{ t('message.quantity', {}, { locale: 'en' }) }}</label
        >
        <select id="locale-select" v-model="count">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </form>
      <i18n-t
        tag="p"
        class="plural"
        keypath="message.plural"
        locale="en"
        :plural="count"
      >
        <template #n>
          <b>{{ count }}</b>
        </template>
      </i18n-t>
    </div>
    <script>
      const { createApp, ref } = Vue
      const { createI18n, useI18n } = VueI18n

      const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {
          en: {
            message: {
              language: 'English',
              quantity: 'Quantity',
              list: 'hello, {0}!',
              named: 'hello, {name}!',
              linked: '@:message.named How are you?',
              plural: 'no bananas | {n} banana | {n} bananas'
            }
          },
          ja: {
            message: {
              language: '日本語',
              list: 'こんにちは、{0}！',
              named: 'こんにちは、{name}！',
              linked: '@:message.named ごきげんいかが？'
            }
          }
        }
      })

      const app = createApp({
        setup() {
          const { t } = useI18n()
          const count = ref(0)
          return { count, t }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
